<template>
	<view class="" :style="props._style">
		<!-- #ifdef APP-NVUE -->
		<text
			v-if="!_isImg"
			class="ac-icon"
			:class="[props._class]"
			:style="{ color: _color, 'font-size': props.size + props.unit }"
			@click="_onClick"
			@longpress="_onLongPress"
			>{{ unicode }}</text
		>
		<!-- #endif  -->
		<!-- #ifndef APP-NVUE -->
		<text
			v-if="!_isImg"
			:class="['uniui-' + props.name, 'ac-icon', props._class]"
			:style="{ color: _color, 'font-size': props.size + props.unit }"
			@click="_onClick"
			@longpress="_onLongPress"
		></text>
		<!-- #endif  -->

		<image
			v-if="_isImg"
			:src="props.name"
			:class="[props._class]"
			:style="{
				width: props.size + 'rpx',
				height: props.size + 'rpx',
			}"
			:fade-show="false"
			mode="scaleToFill"
		/>
	</view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

import icons from './icons';
import iconUrl from './uniicons.ttf';

const emits = defineEmits(['click', 'longpress']);

// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');

domModule.addRule('fontFace', {
	fontFamily: 'uniicons',
	src: "url('" + iconUrl + "')",
});

// #endif

const props = defineProps({
	name: {
		type: String,
		default: '',
	},
	color: {
		type: String,
		default: 'gray-800',
	},
	size: {
		type: [Number, String],
		default: 64,
	},
	//rpx | px
	unit: {
		type: String,
		default: 'rpx',
	},
	_class: {
		type: String,
	},
	_style: {
		type: Object,
		default: () => {},
	},
});

const _isImg = computed(() => props.name && props.name.indexOf('/') !== -1);
const _color = computed(() => computedColor(props.color, ''));

const _icons = icons.glyphs;

const unicode = computed(() => {
	let code = _icons.find((v) => v.font_class === props.name);

	let _unicode = '';
	if (code) {
		_unicode += unescape(`%u${code.unicode}`);
	}
	return _unicode;
});

function _onClick(e: any) {
	emits('click', e);
}

function _onLongPress(e: any) {
	emits('longpress', e);
}
</script>

<style scoped>
/* 	image {
		will-change: transform
	} */

/* #ifndef APP-NVUE */
@import './uniicons.css';

@font-face {
	font-family: uniicons;
	src: url('./uniicons.ttf') format('truetype');
}

/* #endif */

.ac-icon {
	font-family: uniicons;
	text-decoration: none;
	text-align: center;
}

.ac-icon-custom {
	font-family: iconfont;
	text-decoration: none;
	text-align: center;
}
</style>
